import { useLazyLoad } from '@/hooks/useLazyLoad';

export const LazyImage = ({ src, alt, className }) => {
  const { imgRef, isLoaded } = useLazyLoad(100); // 接近顶部 100px 时加载

  return (
    <div>
      <img
        className={className}
        ref={imgRef}
        data-src={src}
        alt={alt}
        style={{ opacity: isLoaded ? 1 : 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
};
